<template>
  <div class="about-page">
    <!-- 顶部横幅区域 -->
    <div class="hero-section">
      <div class="hero-overlay">
        <div class="hero-content">
          <h1 class="hero-title">关于我们</h1>
          <p class="hero-subtitle">数字化转型的技术合作伙伴</p>
        </div>
      </div>
      <img class="hero-image" src="/src/static/introduct.png" alt="公司介绍图" />
    </div>

    <!-- 企业简介区域 -->
    <div class="company-intro-section">
      <div class="section-container">
        <div class="intro-content">
          <div class="section-header">
            <span class="section-badge">ABOUT US</span>
            <h2 class="section-title">企业简介</h2>
            <div class="title-decoration"></div>
          </div>
          <div class="intro-text">
            <p class="highlight-text">
              厦门中联物联信息技术有限公司成立于 <strong>2016 年 3 月 29 日</strong>，注册地位于厦门市湖里区金钟路 3 号 1706-2，是一家聚焦数字化领域的技术服务企业。
            </p>
            <p>
              公司以<span class="keyword">物联网</span>、<span class="keyword">工业互联网</span>、<span class="keyword">大数据技术</span>为核心，业务涵盖技术研发（如物联网技术研发、工程和技术研究试验发展、软件开发）、场景化服务（如物联网技术与应用服务、工业互联网数据服务、大数据服务、信息系统集成）、设备与产品销售（如计算机软硬件、通讯设备、物联网及云计算设备的批发零售），同时提供信息技术咨询、科技推广、数据处理、互联网销售（除需许可商品）及文化艺术交流活动组织等服务，全方位助力各行业数字化转型与发展。
            </p>
          </div>
        </div>
        <div class="intro-image-container">
          <div class="image-wrapper">
            <img src="/src/static/logo.png" alt="公司logo" />
            <div class="image-decoration"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心优势区域 -->
    <div class="advantages-section">
      <div class="section-container">
        <div class="section-header center">
          <span class="section-badge">OUR ADVANTAGES</span>
          <h2 class="section-title">核心优势</h2>
          <div class="title-decoration"></div>
        </div>
        <div class="advantages-grid">
          <div class="advantage-card">
            <div class="card-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>技术研发</h3>
            <p>专注物联网、工业互联网技术研发，软件开发能力强大</p>
          </div>
          <div class="advantage-card">
            <div class="card-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                <path d="M9 9H15M9 12H15M9 15H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <h3>场景化服务</h3>
            <p>提供大数据服务、信息系统集成等全方位解决方案</p>
          </div>
          <div class="advantage-card">
            <div class="card-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
                <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <h3>经验丰富</h3>
            <p>自2016年成立以来，积累了丰富的行业经验</p>
          </div>
          <div class="advantage-card">
            <div class="card-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21V19C17 16.2386 14.7614 14 12 14C9.23858 14 7 16.2386 7 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
              </svg>
            </div>
            <h3>专业团队</h3>
            <p>拥有专业的技术团队，提供优质的技术咨询服务</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 公司地址区域 -->
    <div class="location-section">
      <div class="section-container">
        <div class="section-header center">
          <span class="section-badge">FIND US</span>
          <h2 class="section-title">公司地址</h2>
          <div class="title-decoration"></div>
        </div>
        <div class="location-content">
          <div class="address-info">
            <div class="info-item">
              <div class="info-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <div class="info-text">
                <h4>地址</h4>
                <p>厦门市湖里区金钟路 3 号 1706-2</p>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 8L10.89 13.26C11.54 13.67 12.46 13.67 13.11 13.26L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </div>
              <div class="info-text">
                <h4>邮箱</h4>
                <p>info@zomiot.com</p>
              </div>
            </div>
            <div class="info-item">
              <div class="info-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 5C3 3.89543 3.89543 3 5 3H8.27924C8.70967 3 9.09181 3.27543 9.22792 3.68377L10.7257 8.17721C10.8831 8.64932 10.6694 9.16531 10.2243 9.38787L7.96701 10.5165C9.06925 12.9612 11.0388 14.9308 13.4835 16.033L14.6121 13.7757C14.8347 13.3306 15.3507 13.1169 15.8228 13.2743L20.3162 14.7721C20.7246 14.9082 21 15.2903 21 15.7208V19C21 20.1046 20.1046 21 19 21H18C9.71573 21 3 14.2843 3 6V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="info-text">
                <h4>电话</h4>
                <p>+86 592 1234 5678</p>
              </div>
            </div>
          </div>
            <div class="map-container">
              <div id="amap-container" ref="mapContainer" v-show="mapLoaded"></div>
              <!-- 地图加载失败时显示本地图片 -->
              <img v-show="!mapLoaded" src="../static/address.png" alt="公司位置地图" class="map-fallback-image">
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { AMAP_CONFIG } from '@/config/amap.config.js'

const mapContainer = ref(null)
const mapLoaded = ref(false) // 地图加载状态标识

onMounted(() => {
  // 初始化高德地图
  AMapLoader.load({
    key: AMAP_CONFIG.key,
    version: AMAP_CONFIG.version,
    plugins: AMAP_CONFIG.plugins
  }).then((AMap) => {
    const { lng, lat, name, address, email, phone, zoom } = AMAP_CONFIG.company
    
    // 创建地图实例
    const map = new AMap.Map('amap-container', {
      zoom: zoom,
      center: [lng, lat],
      mapStyle: 'amap://styles/whitesmoke', // 简洁风格
      viewMode: '2D',
      features: ['bg', 'road', 'building', 'point'], // 显示地图要素
      showLabel: true // 显示标注
    })

    // 添加公司位置标记（自定义样式）
    const marker = new AMap.Marker({
      position: [lng, lat],
      title: name,
      icon: new AMap.Icon({
        size: new AMap.Size(40, 50),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
        imageSize: new AMap.Size(40, 50)
      }),
      anchor: 'bottom-center', // 设置锚点
      animation: 'AMAP_ANIMATION_DROP' // 添加跳动动画
    })
    
    map.add(marker)

    // 创建信息窗体
    const infoWindow = new AMap.InfoWindow({
      isCustom: false,
      content: `
        <div style="padding: 16px; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;">
          <h3 style="margin: 0 0 12px 0; color: #667eea; font-size: 16px; font-weight: 600;">
            ${name}
          </h3>
          <div style="border-top: 1px solid #e2e8f0; padding-top: 12px;">
            <p style="margin: 8px 0; color: #4a5568; font-size: 14px; line-height: 1.6;">
              <span style="color: #667eea; font-weight: 600;">📍 地址：</span>${address}
            </p>
            <p style="margin: 8px 0; color: #4a5568; font-size: 14px; line-height: 1.6;">
              <span style="color: #667eea; font-weight: 600;">📧 邮箱：</span>${email}
            </p>
            <p style="margin: 8px 0; color: #4a5568; font-size: 14px; line-height: 1.6;">
              <span style="color: #667eea; font-weight: 600;">📞 电话：</span>${phone}
            </p>
          </div>
        </div>
      `,
      offset: new AMap.Pixel(0, -35),
      closeWhenClickMap: true
    })

    // 点击标记显示信息窗体
    marker.on('click', () => {
      infoWindow.open(map, marker.getPosition())
    })

    // 默认打开信息窗体（延迟打开，确保地图加载完成）
    setTimeout(() => {
      infoWindow.open(map, marker.getPosition())
    }, 800)

    // 添加比例尺控件
    const scale = new AMap.Scale({
      position: 'LB' // 左下角
    })
    map.addControl(scale)
    
    // 添加工具条控件（缩放、平移）
    const toolBar = new AMap.ToolBar({
      position: {
        top: '110px',
        right: '15px'
      },
      locate: true // 显示定位按钮
    })
    map.addControl(toolBar)

    // 添加3D罗盘控制
    const controlBar = new AMap.ControlBar({
      position: {
        top: '15px',
        right: '15px'
      },
      showControlButton: true
    })
    map.addControl(controlBar)

    // 地图加载完成后添加一个圆形区域标识（可选）
    map.on('complete', () => {
      // 添加一个半透明圆圈标识公司区域
      const circle = new AMap.Circle({
        center: [lng, lat],
        radius: 200, // 半径200米
        strokeColor: '#667eea',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: '#667eea',
        fillOpacity: 0.1,
        zIndex: 10
      })
      map.add(circle)
      
      // 地图加载成功，设置状态
      mapLoaded.value = true
    })
    
  }).catch((e) => {
    console.error('高德地图加载失败:', e)
    console.error('请确保已在 src/config/amap.config.js 中配置正确的 API Key')
    console.warn('降级显示本地地图图片: src/static/address.png')
    // 地图加载失败，保持 mapLoaded 为 false，显示本地图片
    mapLoaded.value = false
  })
})
</script>

<style scoped>
/* 全局样式 */
.about-page {
  background: #f8f9fa;
  min-height: 100vh;
}

/* 顶部横幅区域 */
.hero-section {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.3;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.8) 0%, rgba(91, 55, 183, 0.8) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  color: white;
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  font-size: 56px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
  font-size: 24px;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 300;
  letter-spacing: 2px;
}

/* 公共容器样式 */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  margin-bottom: 48px;
}

.section-header.center {
  text-align: center;
}

.section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 12px 0;
}

.title-decoration {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  margin-top: 16px;
}

.section-header.center .title-decoration {
  margin-left: auto;
  margin-right: auto;
}

/* 企业简介区域 */
.company-intro-section {
  padding: 80px 0;
  background: white;
}

.company-intro-section .section-container {
  display: flex;
  gap: 60px;
  align-items: center;
}

.intro-content {
  flex: 1;
  animation: fadeInLeft 0.8s ease-out;
}

.intro-text {
  margin-top: 24px;
}

.intro-text p {
  font-size: 16px;
  line-height: 2;
  color: #4a5568;
  margin-bottom: 20px;
  text-align: justify;
}

.highlight-text {
  font-size: 18px !important;
  color: #2d3748 !important;
  font-weight: 500;
  padding: 20px;
  background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
  border-left: 4px solid #667eea;
  border-radius: 8px;
}

.keyword {
  color: #667eea;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
}

.intro-image-container {
  flex: 0 0 400px;
  animation: fadeInRight 0.8s ease-out;
}

.image-wrapper {
  position: relative;
  padding: 20px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.image-wrapper:hover img {
  transform: translateY(-8px);
}

.image-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  opacity: 0.1;
  z-index: 1;
}

/* 核心优势区域 */
.advantages-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.advantage-card {
  background: white;
  padding: 40px 28px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.advantage-card:nth-child(1) { animation-delay: 0.1s; }
.advantage-card:nth-child(2) { animation-delay: 0.2s; }
.advantage-card:nth-child(3) { animation-delay: 0.3s; }
.advantage-card:nth-child(4) { animation-delay: 0.4s; }

.advantage-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}

.card-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.advantage-card:hover .card-icon {
  transform: rotateY(360deg);
}

.card-icon svg {
  width: 36px;
  height: 36px;
}

.advantage-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 12px 0;
}

.advantage-card p {
  font-size: 14px;
  line-height: 1.8;
  color: #718096;
  margin: 0;
}

/* 公司地址区域 */
.location-section {
  padding: 80px 0;
  background: white;
}

.location-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  margin-top: 48px;
  align-items: start;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.info-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  animation: fadeInLeft 0.6s ease-out;
  animation-fill-mode: both;
}

.info-item:nth-child(1) { animation-delay: 0.1s; }
.info-item:nth-child(2) { animation-delay: 0.2s; }
.info-item:nth-child(3) { animation-delay: 0.3s; }

.info-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.info-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.info-icon svg {
  width: 24px;
  height: 24px;
}

.info-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.info-text p {
  font-size: 15px;
  color: #718096;
  margin: 0;
  line-height: 1.6;
}

.map-container {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  height: 100%;
  min-height: 400px;
  animation: fadeInRight 0.8s ease-out;
  position: relative;
}

#amap-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 16px;
}

/* 地图加载失败时的本地图片样式 */
.map-fallback-image {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 42px;
  }
  
  .hero-subtitle {
    font-size: 20px;
  }

  .company-intro-section .section-container {
    flex-direction: column;
    gap: 40px;
  }

  .intro-image-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .location-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 350px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .section-title {
    font-size: 28px;
  }

  .company-intro-section,
  .advantages-section,
  .location-section {
    padding: 60px 0;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .intro-text p,
  .highlight-text {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .section-title {
    font-size: 24px;
  }

  .section-container {
    padding: 0 16px;
  }

  .company-intro-section,
  .advantages-section,
  .location-section {
    padding: 40px 0;
  }
}
</style>